<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Android 牛轧糖加载动画</title>
		<style type="text/css">
			body {
  height: 100%;
  width: 100%;
  margin: 0px;
  position: absolute;
  background: black;
}

.container {
  margin: auto;
  width: 300px;
  height: 300px;
  position: relative;
  top: 45%;
  transform: translateY(-45%);
}

.ring {
  width: 300px;
  height: 300px;
  border-radius: 300px;
  position: absolute;
  mix-blend-mode: screen;
  background: transparent;
}

.red {
  border: 18px solid #d50f1c;
  animation: redanim linear 6s;
  animation-iteration-count: infinite;
}

.green {
  border: 18px solid #009927;
  animation: greenanim linear 6s;
  animation-iteration-count: infinite;
}

.blue {
  border: 18px solid #3569e1;
  animation: blueanim linear 6s;
  animation-iteration-count: infinite;
}

.yellow {
  border: 18px solid #edb40f;
  animation: yellowanim linear 6s;
  animation-iteration-count: infinite;
}

@keyframes redanim {
  0% {
    transform: rotate(0deg) scaleX(0.9) scaleY(1);
  }
  50% {
    transform: rotate(180deg) scaleX(0.9) scaleY(1);
  }
  100% {
    transform: rotate(360deg) scaleX(0.9) scaleY(1);
  }
}
@keyframes greenanim {
  0% {
    transform: rotate(31deg) scaleX(0.9) scaleY(1);
  }
  25% {
    transform: rotate(121deg) scaleX(1) scaleY(0.9);
  }
  50% {
    transform: rotate(211deg) scaleX(0.9) scaleY(1);
  }
  75% {
    transform: rotate(301deg) scaleX(1) scaleY(0.9);
  }
  100% {
    transform: rotate(391deg) scaleX(0.9) scaleY(1);
  }
}
@keyframes blueanim {
  0% {
    transform: rotate(413deg) scaleX(0.9) scaleY(1);
  }
  50% {
    transform: rotate(233deg) scaleX(0.9) scaleY(1);
  }
  100% {
    transform: rotate(53deg) scaleX(0.9) scaleY(1);
  }
}
@keyframes yellowanim {
  0% {
    transform: rotate(472deg) scaleX(0.9) scaleY(1);
  }
  25% {
    transform: rotate(382deg) scaleX(1) scaleY(0.9);
  }
  50% {
    transform: rotate(292deg) scaleX(0.9) scaleY(1);
  }
  75% {
    transform: rotate(202deg) scaleX(1) scaleY(0.9);
  }
  100% {
    transform: rotate(112deg) scaleX(0.9) scaleY(1);
  }
}

		</style>
	</head>
	<body>
		<div class="container">
  <div class="ring red"></div>
  <div class="ring green"></div>
  <div class="ring blue"></div>
  <div class="ring yellow"></div>
</div>
	</body>
</html>
